<template>
  <div class="vehicle-page">
    <el-card class="card">
      <el-form ref="form" label-width="100px" class="flex-form">
        <div class="form-row">
          <el-form-item label="车型编号:" class="flex-item">
            <el-input
              v-model="queryParams.id "
              size="medium"
              clearable
              placeholder="请输入车型编号"
            />
          </el-form-item>
        </div>

        <el-form-item label="应载编号:" class="flex-item">
          <el-select v-model="queryParams.allowableLoad" placeholder="请选择">
            <el-option
              v-for="(item,index) in allowableLoadList"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <div class="form-row">
          <el-form-item label="应载体积:" class="flex-item">
            <el-select v-model="queryParams.allowableLoadList" placeholder="请选择">
              <el-option
                v-for="(item,index) in allowableVolumeList"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="车辆类型:" class="flex-item">
            <el-input
              v-model="queryParams.name"
              size="medium"
              class="search"
              clearable
              placeholder="请输入车辆类型"
              @change="getPagingVehicleList"
            />
          </el-form-item>
        </div>

        <div class="form-row align-right">
          <el-form-item>
            <el-button type="primary" size="medium" class="stbList" @click="search">搜索</el-button>
            <el-button type="primary" size="medium" class="addList" @click="reset">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <!-- 卡片体 -->
    <el-card class="card-list">
      <el-button type="primary" size="medium" class="stbList" @click="addVehicle">新增车型</el-button>
      <!-- 表格 -->
      <template>
        <el-table class="table" :data="list" style="width: 100%" :header-cell-style="{background:'#f8faff'}">
          <el-table-column label="序号" type="index" width="100" />
          <el-table-column prop="id" label="车型编号" />
          <el-table-column prop="name" label="车辆类型" />
          <el-table-column prop="num" label="车辆数量" />
          <el-table-column prop="allowableLoad" label="应载重量(吨)" />
          <el-table-column prop="allowableVolume" label="应载体积(立方米)" />
          <el-table-column prop="measureLong" label="长(米)" />
          <el-table-column prop="measureWidth" label="宽(米)" />
          <el-table-column prop="measureHigh" label="高(米)" />
          <el-table-column label="操作">
            <template #default="{row}">
              <div class="button-container">
                <el-button
                  type="text"
                  class="textbtn"
                  :disabled="row.status === 1"
                  @click="examineVehiclefee(row.id)"
                >编辑</el-button> &#124;
                <el-button
                  type="text"
                  @click="deleteVehiclefee(row.id)"
                >删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页器 -->
      <el-row type="flex" justify="center" align="middle">
        <el-pagination
          class="pagination"
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-row>
    </el-card>
    <!-- 新增编辑弹窗 -->
    <!-- :title="title"：这里你将父组件的title属性传递给子组件的title属性，使用了:前缀表示该属性是动态绑定的。 -->
    <!-- :is-show-dialog.sync="isShowDialog"：这里你将父组件的isShowDialog属性传递给子组件的is-show-dialog属性 -->
    <!-- 并通过.sync修饰符实现了双向绑定。这意味着子组件内部对is-show-dialog属性的修改会同步到父组件中。 -->
    <!-- @refreshBuilding="getBuildingList"：这里你监听了子组件的refreshBuilding事件，并指定其触发时调用父组件的getBuildingList方法。 -->
    <add-vehicle ref="addVehicle" :title="title" :is-show-dialog.sync="isShowDialog" @refreshvehicle="getPagingVehicleList" />
    <div class="footer">
      <span>江苏传智播客教育科技股份有限公司</span>
      <span> 版权所有Copyright 2006-2022 All Rights Reserved</span>
      <span> 苏ICP备16007882号-11</span>
    </div>
  </div>
</template>

<script>
// getPagingVehicleList
import { getPagingVehicleList } from '@/api/vehicle'
import AddVehicle from '@/views/park/vehicle/components/add-vehicle.vue'
export default {
  name: 'VehiclePage',
  components: {
    AddVehicle
  },
  data() {
    return {
      // 表格列表数据
      list: [],
      allowableLoadList: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<1.8（吨）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '1.8-6（吨）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '6-14（吨）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '14-30（吨）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '30-50（吨）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '50-100（吨）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '100>（吨）'
        }
      ], // 获取车辆列表的重量数组
      allowableVolumeList: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<3（m³）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '3-5（m³）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '5-10（m³）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '10-15（m³）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '15-30（m³）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '30-50（m³）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '50-80（m³）'
        },
        {
          value: 'RANGE_LEVEL_8',
          name: '80-150（m³）'
        },
        {
          value: 'RANGE_LEVEL_9',
          name: '150>（m³）'
        }
      ], // 获取车辆列表的体积数组
      // 查询参数
      queryParams: {
        // 车型编号
        id: '',
        // 车型类型
        name: '',
        allowableLoad: '', // 车型载重
        allowableVolume: '', // 车型体积
        // 页码
        page: 1,
        // 一页多少条
        pageSize: 10
      },
      // 总条数
      total: 10,
      // 弹窗标题
      title: '新增车型',
      // 是否显示新增或编辑的弹窗
      isShowDialog: false
    }
  },
  created() {
    this.getPagingVehicleList()
  },
  methods: {
    // 查询车辆类型信息列表
    async getPagingVehicleList() {
      // console.log(this.queryParams)
      const result = await getPagingVehicleList(this.queryParams)
      // console.log(result)
      // 更新列表数据
      this.list = result.data.items
      // 更新总条数
      // this.total = result.data.pageSize
    },
    // 搜索
    async search() {
      await this.getPagingVehicleList(this.queryParams)
    },
    // 新增车型
    addVehicle() {
      this.title = '新增车型'
      this.isShowDialog = true
    },
    // 编辑车型
    examineVehiclefee(id) {
      this.title = '编辑车型'
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.addVehicle.getDetailVehicleList(id)
      })
    },
    // 清除表单
    reset() {
      this.queryParams = {
        name: '', // 车辆类型名称
        allowableLoad: '', // 车型载重
        allowableVolume: '', // 车型体积
        id: '', // 车型编号
        page: 1, // 当前页
        pageSize: 10 // 每页大小
      }
      // 重新发送请求
      this.getPagingVehicleList()
    },
    // 删除车型
    deleteVehiclefee() {
      this.$message.error('绑定车辆的车型无法删除')
    },
    // 页容量改变
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getPagingVehicleList()
    },
    // 页码切换
    handlePageChange(page) {
      this.queryParams.page = page
      this.getPagingVehicleList()
    }
  }

}
</script>

<style lang="scss" scoped>
.vehicle-page {
  .card {
    height: 200px;
    margin: 20px 20px;
    padding: 20px 20px;
.flex-form {
  display: flex;
  flex-wrap: wrap;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.flex-item {
  flex: 1;
  margin: 0 30px;
}
.form-row .el-input,
.form-row .el-select {
  width: 280px;
}
.vertical-divider::before {
  content: "";
  display: block;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.align-right {
  justify-content: flex-end;
}

    // 输入框
    ::v-deep .search {
      width: 220px;
      margin-right: 20px;
    }

    // 表格
    .table {
      margin-top: 20px;
    }

    // 分页器
    .pagination {
      margin-top: 20px;
    }
  }
  .card-list{
   margin: 20px 20px;
    padding: 0px 20px;
  }
  .stbList{
    margin-bottom: 20px;
    background-color: rgb(227, 66, 66);
    border-color: rgba(0, 0, 0, 0);

  }
  .addList{
    color: black;
    background-color:white;
    border-color:black
  }
  .textbtn{
    padding-right: 10px;
  }
   .footer{
    margin-top: 50px;
    text-align: center;
    color: rgb(180, 180, 180);
    span{
      margin-right: 5px;
    }
  }
   }
</style>

